<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      header{
          width:100%;
          height:100px;
          background:#f27C31;
          font-size:70px;
          font-weight: bold;
          color:white;
          text-align:center;
      
      }
     
     section{
         width:100%;
         height:550px;
         background:#88888888;
     }

    nav{
        width:25%;
        height:550px;
        float: left;
    }

    nav p,aside p{
        color:white;
        font-size:18px;
        text-align: center;
    }

    ul li{
        list-style: none;
        color:#F27C31;
        font-size:15px;
    }

    article{
        width:50%;
        height:260px;
        background:#EDEDED;
        float: left;
        margin-top:10px;
        border-radius: 15px;
    }

    article>p{
        width:95%;
    }

    .p1_hea, .p1_foot{
        height:30px;
        background:#F27C31;
        color:white;
        margin: 10px auto;
        text-align: center;
        line-height: 30px;
        border-radius: 15px;
    }

    .p1_art{
        height:145px;
        font-size:15px;
        margin-left: 15px;
        text-align: left;
    }

    aside{
        width:25%;
        height:550px;
        float: right;
        margin-top: -270px;
    }

    .p1_asi{
        color:white;
        font-size:15px;
        margin-left: 15px;
        text-align:left;
    }

    footer{
        width:100%;
        height:100px;
        background:#F27C31;
        font-size:70px;
        font-weight: bold;
        color:white;
        text-align: center;
        line-height: -40px;
    }
    </style>
    </head>
        
   <body>  
   <header>Header</header>
   <section>
       <nav>
           <p>Nav</p>
           <ul>
               <li>Link1</li>
               <li><hr size="5px" width="80%" color="white" align="left"></li>
               <li>Link2</li>
               <li><hr size="5px" width="80%" color="white" align="left"></li>
               <li>Link3</li>
               <li><hr size="5px" width="80%" color="white" align="left"></li>
           </ul>
       </nav>
       <article>
           <p class="p1_hea">Article Header</p>
           <p class="p1_art">Html5:"Lorem ipsum dolor numc aut nunquam sit amet,consectetur adlipiscing elit.
                Vivamus at est eros,vel fringilla urna,Pellentesquce odio rhoncus Html5:"Lorem ipsum dolor numc aut nunquam sit amet,consectetur adlipiscing elit.
                Vivamus at est eros,vel fringilla urna,Pellentesquce odio rhoncus Html5:"Lorem ipsum dolor numc aut nunquam sit amet,consectetur adlipiscing elit.
                Vivamus at est eros,vel fringilla urna,Pellentesquce odio rhoncus</p>
           <p class="p1_foot">Article Header</p>
       </article>
       <article>
            <p class="p1_hea">Article Header</p>
            <p class="p1_art">Html5:"Lorem ipsum dolor numc aut nunquam sit amet,consectetur adlipiscing elit.
                 Vivamus at est eros,vel fringilla urna,Pellentesquce odio rhoncus Html5:"Lorem ipsum dolor numc aut nunquam sit amet,consectetur adlipiscing elit.
                 Vivamus at est eros,vel fringilla urna,Pellentesquce odio rhoncus Html5:"Lorem ipsum dolor numc aut nunquam sit amet,consectetur adlipiscing elit.
                 Vivamus at est eros,vel fringilla urna,Pellentesquce odio rhoncus</p>
            <p class="p1_foot">Article Header</p>
        </article>
        <aside>
            <p>Aside</p>
            <p class="p1_asi">Html5:"Lorem ipsum dolor numc aut nunquam sit amet,consectetur adlipiscing elit.
                    Vivamus at est eros,vel fringilla urna,Pellentesquce odio rhoncus</p>
        </aside>
   </section>
   <footer>Footer</footer>
</body>
</html>